<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<link rel="stylesheet" type="text/css" href="<c:url value="/scripts/datatables/css/${sessionScope.loginUser.themePath}/demo_table_jui.css"/>">
<link rel="stylesheet" type="text/css" href="<c:url value="/scripts/datatables/css/${sessionScope.loginUser.themePath}/ColReorder.css"/>">
<link rel="stylesheet" type="text/css" href="<c:url value="/scripts/datatables/css/${sessionScope.loginUser.themePath}/TableTools.css"/>">
<link rel="stylesheet" type="text/css" href="<c:url value="/scripts/datatables/css/${sessionScope.loginUser.themePath}/ColVis.css"/>">
<script type="text/javascript" language="javascript" src="<c:url value='/scripts/datatables/js/jquery.dataTables.min.js'/>"></script>
<script type="text/javascript" language="javascript" src="<c:url value='/scripts/datatables/js/ColReorderWithResize.min.js'/>"></script>
<script type="text/javascript" language="javascript" src="<c:url value='/scripts/datatables/js/ColVis.min.js'/>"></script>
<script type="text/javascript" language="javascript" src="<c:url value='/scripts/datatables/js/TableTools.min.js'/>"></script>
<script type="text/javascript" language="javascript" src="<c:url value='/scripts/datatables/js/ZeroClipboard.min.js'/>"></script>
<script language="javascript">

/**
 * 初始化datatables列表，并渲染数据
 * @author-hxw,2012-3-15
 * params
 *    	func: 预留
 * 	  	tabType: datatable列表的类型
 *	  	flag:非页面加载时，例如按钮触发时可以使用该参数来主动刷新datatables数据，为'true'会调用接口刷新列表
 *		aurl:渲染datatable的列表数据的来源，可以是json格式的文本文件路径，也可以是请求服务端的url，返回json格式的数据对象，由datatables自动渲染数据
 *		burl:自定义的保存用户习惯的ajax按钮请求的url
 *		fromType:扩展参数的类型，eg.知识中心各栏目用户都有自己的个性化设置，那么需要一个类型和id来区分
 *				 知识中心fromType=1，其他模块如果有类似需要这样定义的，再根据需要定义
 *		fromId:同fromType配合使用用来支持不确定类型的用户设置
 */
function initDataTable(func,tabType,flag,aurl,burl,fromType,fromId){
	var surl = initDatatablesLanguage();
	aurl = aurl + '&dtables_iDisplayStart=${param.dtables_iDisplayStart == null ? "" : param.dtables_iDisplayStart}' + '&dtables_iDisplayLength=${param.dtables_iDisplayLength == null ? "" : param.dtables_iDisplayLength}';
	//alert(aurl);
	var aoColumnDefs = null;
	<c:if test="${not empty dataTablesColumnsDef}">
	 aoColumnDefs = ${dataTablesColumnsDef};//后台传来的json格式显示的表格样式，如显示那些列、是否排序等
	</c:if>
	var exclude_sort_array = getExcludeSortCol(aoColumnDefs);
	var oTable = jQuery('#dTGrid_').dataTable({
		"iDisplayLength": 15,//列表默认展示15条记录
		"aoColumnDefs": aoColumnDefs,//表格显示样式，由后台查询数据库返回json对象
		"bStateSave": false,//是否记录列表状态（cookie方式），不知道为什么不起效果
		/**
		 * datatables的布局方式，以下是html展示符号代表的含义
		 * R：支持拖拽、交换列
		 * < > ：尖括号为div层
		 * "clear" ：该div所使用的样式或者主题
		 * "H"： 列表头的主题
		 * l：length即每页显示的记录下拉框
		 * r：进度条
		 * T:tabletool扩展插件按钮
		 * C：显示/隐藏插件按钮
		 * t:datatables列表主table
		 * "F"： 列表尾的主题
		 * i:查询列表的信息，如当前第几页，共多少页
		 * p:分页导航条，导航条支持简单、全模式，由sPaginationType属性指定
		*/
		"sDom": 'R<"dataTables_my_div1"TCr>t<"dataTables_my_div"ip>',
		"sPaginationType": "full_numbers",//显示分页信息的全信息，包含上下页、首页、尾页等信息，其他显示方式查询API或官网
		"oLanguage": {
			"sUrl":surl  //国际化处理
		},
		"aLengthMenu":[15,50,100],//设置每页显示的条数默认值
		"oColVis": {"aiExclude": exclude_sort_array[0],
					"buttonText":"&nbsp;&nbsp;&nbsp;"},//隐藏显示中排除的列，同时也不会再查询列表中显示
		"aaSorting": exclude_sort_array[1],//默认按照哪列显示
		"bJQueryUI": true,//是否使用UI
		//"bStateSave": true,//保存状态
		"oTableTools": {//设置tableTools属性
			"sSwfPath": "<c:url value='/scripts/datatables/swf/copy_cvs_xls.swf'/>",//flash的影片文件路径
			"aButtons": [//显示的按钮
				{//自定义的用来设置用户列表习惯的按钮
					"sExtends":    "text",
					"sButtonText": "&nbsp;&nbsp;",//按钮名称
					"aButtons":    ["save"],
                    fnClick:function(nButton, oConfig, oFlash){//点击此按钮调用的函数
                        var param ="tabType="+tabType+"&colPros=";//这里的参数需要针对不同的列表进行修改
                        var ths = jQuery('#dTGrid_ TH');
                    	var len = ths.length;
                    	//组装datatables的列表参数 
                    	//colPros：TH的 ID、宽度、是否默认排序以及排序方式
                    	//tabType：查询列表的唯一标识
                    	for(var i = 0; i< len; i++){
                    		var length_s = jQuery("th#"+ths[i].id + " span.DataTables_sort_icon&span.sorting_desc").length;
                    		var length_n = jQuery("th#"+ths[i].id + " span.DataTables_sort_icon&span.sorting_asc").length;
                    		param += ths[i].id + "." + escape(ths[i].style.width) + ".";
                    		if( length_s > 0)
                    			param += "1.desc,";
                  			else if(length_n > 0)
                  				param += "1.asc,";
                  			else
                  				param += "0.asc,";
                    	}
                    	if(fromType){
                    		param +="&fromType=" + fromType;
                    	}
                    	if(fromId){
                    		param +="&fromId=" + fromId;
                    	}
                    	//按钮点击后请求后台
                    	jQuery.ajax({
                    		   type: "POST",
                    		   url: burl,
                    		   data: param,
                    		   success: function(msg){
                    		     alert('<spring:message code="datatables_set_success" text="保存成功！"/>');
                    		   }
                   		});
                    },
					"mColumns": "visible"
				},
				{
					"sExtends":"csv",//按钮继承与某种类型的按钮
					"mColumns": exclude_sort_array[2],//导出列时的参数：visible-只导出显示的列，all-所有列
					"sButtonText" : "&nbsp;&nbsp;&nbsp;&nbsp;",
					"bBomInc": true
				}
			]
		},
		"bSortClasses": false,//排序列是否使用特定样式
		"bAutoWidth": false,
		"bProcessing": false,
		"bServerSide": true,
		"sAjaxSource": aurl,//查询列表需要展示的数据
		"sServerMethod": "POST",
		"bRetrieve": true,//不清楚该属性什么意思，但必须设置，否则只有初始化时才能调用上面的ajax请求，设置后点击查询按钮时可以刷新datatables
		"fnServerData":retrieveData,//往服务传递参数调用的函数
		"fnDrawCallback":fnTableDrawCallback//表格画好后的触发回调函数
	});
	if(flag == 'true'){
		oTable.fnDraw();   //刷新datatables
	}
	
}

/**
 * 初始化datatable的扩展按钮样式
 */
function initButtonStyle(){
	var csv_button = jQuery("button#ToolTables_dTGrid__1");
	var set_button = jQuery("button#ToolTables_dTGrid__0");
	var sh_button = jQuery("button#ToolTables_dTGrid_show_hide");
	var export_excel = jQuery("#export_excel");
	csv_button.css("background","url(<c:url value='/scripts/datatables/images/icon_export.png'/>) no-repeat center");
	set_button.css("background","url(<c:url value='/scripts/datatables/images/icon_save.png'/>) no-repeat center");
	sh_button.css("background","url(<c:url value='/scripts/datatables/images/icon_col.png'/>) no-repeat center");
	csv_button.css("border","0");
	set_button.css("border","0");
	set_button.css("width","16px");
	sh_button.css("border","0");
	export_excel.attr("title","<spring:message code='datatables_export' text='导出报表'/>");
	set_button.attr("title","<spring:message code='datatables_set' text='保存列'/>");
	sh_button.attr("title","<spring:message code='datatables_show_hide_col' text='显示/隐藏列'/>");
	if(jQuery("div.ColVis&TableTools").html().indexOf('ToolTables_dTGrid__0') == -1){
		jQuery("div.ColVis&TableTools")
			.prepend("<span class='ColVis_Span_Text' id='colvis_span_text1'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<spring:message code='datatables_set_text1' text='点击'/></span>")
			.append("<span class='ColVis_Span_Text' id='colvis_span_text2'><spring:message code='datatables_set_text2' text='设置列，点击'/></span>")
			.append("<span class='ColVis_Span_Text' id='colvis_span_text3'><spring:message code='datatables_set_text3' text='保存列'/></span>");
		set_button.insertAfter(jQuery("#colvis_span_text2"));
	}
	
	jQuery("table#dTGrid_ tbody tr").mouseover(function(){
		jQuery(this).attr("class","ex_highlight");
	}).mouseout(function(){
		if(jQuery(this)[0]._DT_RowIndex % 2 == 0){
			jQuery(this).attr("class","gradeA");
		}else{
			jQuery(this).attr("class","gradeU");
		}
	});
	//很无奈，由于隐藏左边菜单栏后，excel控件上的div层位置不会相对改变，点击后改变层得位置
	//当窗口大小改变时,同样存在此问题
	jQuery("#export_excel").parent().css("left",csv_button.position().left);
	jQuery("#togglebtn").click(function(){
		jQuery("#export_excel").parent().css("left",csv_button.position().left);
	});
	jQuery(window).resize(function(){
		jQuery("#export_excel").parent().css("left",csv_button.position().left);
	});
}

/**
 * 初始化datatables的使用语言
 */
function initDatatablesLanguage(){
	var languageCode = Get_Cookie('clientlanguage');
	if(languageCode=="zh_HK"){
		surl = "<c:url value='/scripts/datatables/i18n/data_tables_hk.txt'/>";
	}else if(languageCode=="en_US"){
		surl = "<c:url value='/scripts/datatables/i18n/data_tables_en.txt'/>";
	}else{
		surl = "<c:url value='/scripts/datatables/i18n/data_tables_cn.txt'/>";
	}
	return surl;
}

function setDatatablesPageParam(){
	var settings = jQuery('#dTGrid_').dataTable().fnSettings();
	var iDisplayStart = settings._iDisplayStart;
	var iDisplayLength = settings._iDisplayLength;
	return "dtables_iDisplayStart=" + iDisplayStart + "&dtables_iDisplayLength=" + iDisplayLength;
}

/**
 * 获取排序的和在显示隐藏面板中需要排除的列
 * 返回数组，下标0-显示/隐藏面板中需要排除的列的集合
 *			下标1-排序列的集合
 */
function getExcludeSortCol(aoColumnDefs){
	var array = [];
	var arrayExclude = [];
	var arraySort = [];
	var arrayExportable = [];
	if(aoColumnDefs && aoColumnDefs.length){
		var index1 = 0;
		var index2 = 0;
		var index3 = 0;
		for(var i = 0; i < aoColumnDefs.length; i++){
			if(aoColumnDefs[i].oColVis){
				arrayExclude[index1]=aoColumnDefs[i].aTargets[0];
				index1++;
			}
			if(aoColumnDefs[i].aaSorting){
				arraySort[index2]=[aoColumnDefs[i].aTargets[0],aoColumnDefs[i].aaSortingWay];
				index2++;
			}
			if(aoColumnDefs[i].exportable && aoColumnDefs[i].exportable == '1'){
				arrayExportable[index3]= aoColumnDefs[i].aTargets[0];
				index3++;
			}
		}
	}
	array[0]=arrayExclude;
	array[1]=arraySort;
	array[2]=arrayExportable;
	return array;
}

function queryKn(cid){
	var url = '<c:url value="/modules/knowledge/knowledges.do?method=list&cid='+cid+'"/>'
	jQuery("form#queryform")[0].action=url;
	jQuery("form#queryform")[0].submit();
}


 function ajaxDeleteYourSelf(obj) {
	obj.parentElement.style.display = 'none';
	var paras = "id="+obj.value;
	var url = '<c:url value="/modules/knowledge/knowledgeCatalogyTypes.do?method=ajaxDeleteYourSelf"/>';
	new Ajax.Request(url,{method: 'post',parameters: paras,onSuccess: function(t){
	}});
}
 
 function openwindow(url,name,iWidth,iHeight){
	    //获得窗口的垂直位置
	    var iTop = (window.screen.availHeight-30-iHeight)/2;
	    //获得窗口的水平位置
	    var iLeft = (window.screen.availWidth-10-iWidth)/2;
	    if(document.getElementById("i_loves") != null)
	   	  url = url + "&iloves="+document.getElementById("i_loves").value;
	    window.open(url,name,'height='+iHeight+',,innerHeight='+iHeight+',width='+iWidth+',innerWidth='+iWidth+',top='+iTop+',left='+iLeft+',status=no,toolbar=no,menubar=no,location=no,resizable=no,scrollbars=1,titlebar=0');
	}
function deleteYourSelf(obj)
{
	obj.parentElement.style.display = 'none';
	var id = obj.value+",";
	var il = window.document.getElementById("i_loves");
	il.value = il.value.replace(id,'');
	if(il.value == "")
	{
		document.getElementById('i_love').innerHTML ="<input type='text' readonly='readonly' size='12'/>";
	}
}

/**
 * 由于ajax动态加载域无法使用ff:urser标签处理，所以使用以下方式来处理
 */
function getFFuserTag(userName, userId, userLoginid, userSex, userLastaction, selector){
	jQuery.ajax({
		url: '../../common/ffuser.jsp?userName='+userName+'&userId='+userId+'&userLoginid='+userLoginid+'&userSex='+userSex+'&userLastaction='+userLastaction,
		dataType:'html',
		success: function(data){
			if(selector != undefined && selector != null){
				jQuery("#" + selector).prepend(data);
				//解决DIV在鼠标移动到子div中产生闪烁问题，据说是IE的bug（jquery可以很好的解决）
				jQuery("div.uc_user_item").removeAttr("onmouseover").removeAttr("onmouseout");
				jQuery("div.uc_user_item").bind(
					{
						mouseenter:function () {
							jQuery(this).children("div.uc_user_menu").show();
						},
						mouseleave:function () {
						  	jQuery(this).children("div.uc_user_menu").hide();
						}
					}
				);
			}
			return data;
		},
		error:function(e){
			return '';
		}
	});
}
</script>
